<!--
 * @Date: 2020-11-25 01:25:11
 * @LastEditTime: 2020-11-28 02:37:15
 * @FilePath: \suki\index.html
-->
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUKI</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./css/index(cmp).css">
    <link rel="stylesheet" href="./src/css/font-awesome.min.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <!--加载页面-->
    <div class="scene">
        <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38" height:"38"
            viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
            <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
                <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite" />
            </text>
            <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
              C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
              C34.797,11.841,28.159,5.203,20,5.203z">
            </path>

            <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
              S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
              S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
            </path>

            <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10"
                d="M5.203,20
                      c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
                <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
                    calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite" />
            </path>

            <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
            c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
            C12.875,32.922,7.078,27.125,7.078,20z">
                <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s"
                    repeatCount="indefinite" />
            </path>
        </svg>
    </div>
    <!--主页-->
    <div id="index">
        <!--页面一-->
        <div id="page1">
            <!--上方logo-->
            <div id="loge_div">
                <div id="loge_img">
                    <p>s u k i</p>
                </div>
                <div id="loge_text">
                    <p>get more interesting</p>
                </div>
            </div>
            <!--登录/注册/APP-->
            <div id="login">
                <div class="section" id="sec_1">
                    <a href="#" class="a_section">
                        <span>注册</span>
                    </a>
                </div>
                <div class="section" id="sec_2">
                    <a href="#" class="a_section">
                        <span>登录</span>
                    </a>
                </div>
                <div class="section" id="sec_3">
                    <a href="#" class="a_section">
                        <span>下载APP</span>
                    </a>
                </div>
                <div id="login_page1">
                    <div id="bor"></div>
                    <div class="login_phone" id="login_1">
                        <a href="#">手机号注册</a>
                    </div>
                    <div class="login_weibo" id="login_2">
                        <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i> 新浪微博注册</a>
                    </div>
                    <div class="login_qq" id="login_3">
                        <a href="#"><i class="fa fa-qq" aria-hidden="true"></i> QQ注册</a>
                    </div>
                    <div class="login_weixin" id="login_4">
                        <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i> 微信注册</a>
                    </div>
                </div>
                <div id="login_page2">
                    <div id="login_form">
                        <form action="./js/login.js">
                            <input type="email" name="user_email" id="user_email" value="常用邮箱">
                            <br />
                            <input type="password" name="psw" id="psw" value="密码">
                        </form>
                    </div>
                    <div class="login_weixin" id="login_box">
                        <a href="#">登录</a>
                    </div>
                    <div class="login_weibo" id="page2_1">
                        <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i> 新浪微博登录</a>
                    </div>
                    <div class="login_qq" id="page2_2">
                        <a href="#"><i class="fa fa-qq" aria-hidden="true"></i> QQ登录</a>
                    </div>
                    <div class="login_weixin" id="page2_3">
                        <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i> 微信登录</a>
                    </div>
                </div>
                <div id="login_page3">
                    <div class="android">
                        <a href="#"><i class="fa fa-android" aria-hidden="true"></i> Android</a>
                    </div>
                    <div class="ios">
                        <a href="#"><i class="fa fa-apple" aria-hidden="true"></i> App Store</a>
                    </div>
                </div>
            </div>
        </div>
        <!--内容页面一-->
        <div class="page2">
            <div class="content">
                <h1>随时随地记录</h1>
                <br />
                <p>方便地记录照片、文字、音乐、视频，适用于iPhone和Android
                    <br /> 移动客户端及PC和ios端，让你随时随地的记录与分享。</p>
            </div>
            <div class="content_img">
                <img src="./img/bg4.png" alt="">
            </div>
            <div class="content_footer">
                <div>
                    <img src="" alt="">
                    <h1>自动同步</h1>
                    <p>方便同步你的内容到新浪微博、QQ空间等社交网络，还可以分享到微信、<br />易信聊天和朋友圈。</p>
                </div>
                <div>
                    <img src="" alt="">
                    <h1>高清图片</h1>
                    <p>使用无损图片压缩技术，上传图片保留高质量细节，当你手机处于wifi网络，<br />将自动加载全高清图片。</p>
                </div>
            </div>
        </div>
        <!--内容页面二-->
        <div class="page2" id="page3">
            <div class="content">
                <h1>众里寻他千百度</h1>
                <br />
                <p>SUKI汇聚了数百万的摄影、胶片玩家，绘画及动漫爱好者，并不断衍生出更多的兴趣圈子，<br />无论是设计、
                    艺术、科技、时尚、旅行、读书、电影评论都有精彩的人与内容不断产出。</p>
            </div>
            <div class="content_img">
                <img src="./img/bg5.png" alt="">
            </div>
            <div class="content_footer">
                <div>
                    <img src="" alt="">
                    <h1>知你所想</h1>
                    <p>通过你的喜欢、关注，标签的使用情况，推荐出更多<br />你感兴趣的人与内容。</p>
                </div>
                <div>
                    <img src="" alt="">
                    <h1>百花齐放</h1>
                    <p>任何人都可以发起与参与话题，征集作品发现有趣的人，<br>还可以通过客户端参加有趣的贴纸话题。</p>
                </div>
            </div>
        </div>
        <!--内容页面三-->
        <div class="page2">
            <div class="content">
                <h1>予独爱莲之出淤泥而不染</h1>
                <br />
                <p>已经拥有520套风格各异的个人主页模板，而且这些模板可以轻松的完成自定义样式及导航，
                    让你的个人<br />主页变得与众不同，提供了12套移动端浏览器适配模板，当使用手机浏览器访问主页时，也如此优雅。</p>
            </div>
            <div class="content_img">
                <img src="./img/bg3.png" alt="">
            </div>
        </div>
        <!--页脚-->
        <div id="footer">
            <div class="footer_text">
                <h1>S U K I</h1>
            </div>
            <div id="footer_support">
                <div class="login_phone" id="bottom_1">
                    <a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> 手机注册</a>
                </div>
                <div class="login_weibo" id="bottom_2">
                    <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i> 新浪微博注册</a>
                </div>
                <div class="login_qq" id="bottom_3">
                    <a href="#"><i class="fa fa-qq" aria-hidden="true"></i> QQ注册</a>
                </div>
                <div class="login_weixin" id="bottom_4">
                    <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i> 微信注册</a>
                </div>
            </div>
        </div>
        <!--底部支持-->
        <div id="index_bottom">
            <div id="bottom_text">
                <p>
                    <br /><br /><br />
                    <a href="#">联系我们</a>|
                    <a href="#">招贤纳士</a>|
                    <a href="#">移动客户端</a>|
                    <a href="#">风格模板</a>|
                    <a href="#">官方博客</a>|
                    <a href="#">侵权投诉</a>
                </p>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js/loading.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/login_action.js"></script>
</body>

</html>